<!--
    create  by Yang
    后台:首页=>废物产量排行榜图表

-->
<template>

    <div class="ant-card">
        <div class="extra-wrapper" slot="tabBarExtraContent" style="text-align: right;">
            <div class="extra-item">
                <a
                        class="box1-item"
                        v-for="(item, index) in menu"
                        :class="{ 'red-link':index === isActive }"
                        v-on:click.stop.prevent='switchTab(index)'>
                    {{ item }}
                </a>
            </div>
            <div style="display: flex;text-align: right;align-items: center; justify-content: end;">
                <a-range-picker
                        :showTime="'HH:mm'"
                        :placeholder="['开始时间', '结束时间']"
                        v-model="rangeTime"
                        format="YYYY-MM-DD HH:mm"
                        @change="handleDateChange"
                />
            </div>
        </div>

        <a-row>
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="ranking-container">
                    <div class="chart" id="chart_bottom1"></div>
                </div>
            </a-col>
            <!--isMobile判断是电脑还是手机-->
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" :style="{marginTop : isMobile() ? '20px' : 0}">
                <rank-list title="机构废物产量排行" :list="rankList"/>
            </a-col>
        </a-row>

    </div>


</template>

<script>
    import RankList from '@/components/chart/RankList'
    import { getAction } from '@/api/manage'
    // mixinDevice判断是手机还是电脑端
    import { mixinDevice } from '@/utils/mixin.js'

    export default {
        name: 'IndexBottomRanking',
        components: {
            RankList
        },
        mixins: [mixinDevice],
        data() {
            //
            let date = new Date()
            let time1 = new Date(date.setHours(0, 0, 0, 0)).Format('yyyy-MM-dd hh:mm')
            let time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')

            return {
                rankList: [],
                mwData: [],// 医废重量
                isActive: 0,
                menu: ['今日', '本周', '本月', '本年'],
                rangeTime: [time1, time2]
            }
        },
        mounted() {
            this.getDataSource()
            this.getDataSource1()
        },
        methods: {
            // a标签改变的方法
            switchTab: function(index) {
                this.isActive = index
                let date = new Date()
                // 默认今日
                let time1 = new Date(date.setHours(0, 0, 0, 0)).Format('yyyy-MM-dd hh:mm')
                let time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')

                // 本周
                if (index == 1) {
                    let WeekFirstDay = new Date(date - (date.getDay() - 1) * 86400000)
                    let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
                    time1 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${WeekFirstDay.getDate()} 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-${WeekLastDay.getDate()} 23:59`).Format('yyyy-MM-dd hh:mm')
                }
                // 本月
                else if (index == 2) {
                    time1 = new Date(`${date.getFullYear()}-${date.getMonth() + 1}-01 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')
                }
                // 本年
                else if (index == 3) {
                    time1 = new Date(`${date.getFullYear()}-01-01 00:00`).Format('yyyy-MM-dd hh:mm')
                    time2 = new Date(date.setHours(0, 0, 0, 0) + (1000 * 60 * 60 * 24 - 1)).Format('yyyy-MM-dd hh:mm')
                }

                this.rangeTime = [time1,time2];
                this.getDataSource()
                this.getDataSource1()
            },
            handleDateChange(value, dateString) {
                this.rangeTime = dateString;
                this.getDataSource()
                this.getDataSource1()
            },
            getDataSource: async function() {
                // 获取废物产量排名数据
                let params = {
                    creatTimeBegin:  this.rangeTime[0],
                    creatTimeEnd: this.rangeTime[1],
                    cityCode: '',
                    areaCode: '',
                }
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo;
                if(userInfo.cityCode){
                    params.cityCode = userInfo.cityCode;
                }
                if(userInfo.areaCode){
                    params.areaCode = userInfo.areaCode;
                }
                let res = await getAction('/hc/Statistical/getCountyWasteSum', params)
                if (res && res.success) {
                    let result = res.result || []
                    let list = [
                        {
                            name: '感染性',
                            value: result.infectiousWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '损伤性',
                            value: result.traumaticWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '病理性',
                            value: result.pathologicalWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '药物性',
                            value: result.medicatedWeight || 0,
                            text: 'KG'
                        },
                        {
                            name: '化学性',
                            value: result.chemicalWeight || 0,
                            text: 'KG'
                        }
                    ]
                    list.forEach((item, index) => {
                        let value = parseFloat(item.value)
                        // value > 10000 kg|公斤
                        if (value > 10000) {
                            item['weight'] = parseInt(value / 1000)
                            item['text'] = '吨'
                        } else {
                            item['weight'] = value
                            item['text'] = 'KG'
                        }
                    })
                    this.mwData = list
                }
                this.getEchartBottom1()
            },
            // 获取机构废物产量排行数据
            async getDataSource1() {
                let params = {
                    creatTimeBegin: this.rangeTime[0],
                    creatTimeEnd: this.rangeTime[1],
                    cityCode: '',
                    areaCode: '',
                }
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo;
                if(userInfo.cityCode){
                    params.cityCode = userInfo.cityCode;
                }
                if(userInfo.areaCode){
                    params.areaCode = userInfo.areaCode;
                }
                let res = await getAction('/hc/Statistical/productionRanking', params)
                let rank = res.result || []
                let list = []
                for (let i = 0; i < rank.length; i++) {
                    list.push({
                        name: rank[i].customer_name,
                        total: rank[i].wasteSum || 0,
                        unitKg: 'KG',
                        unitTon: '吨'
                    })
                }
                this.rankList = list
            },
            getEchartBottom1() {
                // 初始化echarts的实例对象
                let myChart = this.$echarts.init(document.getElementById('chart_bottom1'))
                let wasteList = []
                this.mwData.forEach((item, index) => {
                    wasteList.push(item['name'])
                })
                let option = {
                    color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'],
                    title: {
                        text: '医废产生量排名',
                        left: '150',
                        top: 20,
                        textAlign: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 18,
                            fontWeight: 600
                        }
                    },
                    grid: {
                        left: 0,
                        top: 0,
                        bottom: 10,
                        right: 10,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} kg ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vartical',
                        // x: "right",
                        top: 'center',
                        right: '15',
                        // bottom: "0%",
                        itemWidth: 16,
                        itemHeight: 8,
                        itemGap: 16,
                        textStyle: {
                            color: '#A3E2F4',
                            fontSize: 12,
                            fontWeight: 0
                        },
                        data: wasteList
                    },
                    polar: {},
                    angleAxis: {
                        interval: 1,
                        type: 'category',
                        data: [],
                        z: 10,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#0B4A6B',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            show: true,
                            color: '#0B4A6B',
                            margin: 8,
                            fontSize: 16
                        }
                    },
                    radiusAxis: {
                        min: 40,
                        max: 120,
                        interval: 20,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#0B3E5E',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %',
                            show: false,
                            padding: [0, 0, 20, 0],
                            color: '#0B3E5E',
                            fontSize: 16
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#0B3E5E',
                                width: 2,
                                type: 'solid'
                            }
                        }
                    },
                    calculable: true,
                    series: [{
                        type: 'pie',
                        radius: ['5%', '10%'],
                        hoverAnimation: false,
                        labelLine: {
                            normal: {
                                show: false,
                                length: 30,
                                length2: 55
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: '#0B4A6B'
                                }
                            }
                        }]
                    }, {
                        type: 'pie',
                        radius: ['90%', '95%'],
                        hoverAnimation: false,
                        labelLine: {
                            normal: {
                                show: false,
                                length: 30,
                                length2: 55
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        name: '',
                        data: [{
                            name: '',
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: '#0B4A6B'
                                }
                            }
                        }]
                    }, {
                        stack: 'a',
                        type: 'pie',
                        radius: ['20%', '80%'],
                        roseType: 'area',
                        zlevel: 10,
                        label: {
                            normal: {
                                show: true,
                                formatter: function(r) {
                                    return `${r.data.name} : ${r.data.weight}${r.data.text}`
                                },
                                textStyle: {
                                    fontSize: 12
                                },
                                position: 'outside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                                length2: 55
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        data: this.mwData
                    }]
                }

                myChart.setOption(option, true)

                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 60px;
        padding-right: 24px;

        .extra-item {
            display: inline-block;
            margin-right: 24px;

            a {
                margin-left: 40px;
            }

            .red-link {
                color: #01B8F3;
            }
        }
    }

    .ranking-container {
        .chart {
            height: 5rem;
        }
    }
</style>
